<html>
    <head>
        <title>如何获取getters</title>
    </head>
    <body>
        <script>
            /*
                        三、如何获取 getters 

                                1、通过属性访问，  Getter 会暴露我 store.getters 对象，你可以以属性的形式访问这些值。

                                            eg:

                                                    !-- 页面路径 ：  pages/inde/index.vue ---

                                                    <template>
                                                        <view>
                                                            <view v-for="(item,index) in todos">
                                                                <view>{{ item.id}}</view>
                                                                <view>{{ item.text}}</view>
                                                                <view>{{ item.done}}</view>
                                                            </view>
                                                        </view>
                                                    </template>

                                                    <script>
                                                        import store from '@/store/index.js'  // 引入store
                                                        export default{
                                                            computed:{
                                                                todos(){
                                                                    return store.getters.doneTodos
                                                                }
                                                            }
                                                        }
                                                    <//script>

                                                注意, getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。


                                2、通过  this.$store （vue实例属性）访问

                                            eg: 
                                                     !-- 页面路径 : pages/index/index.vue ---

                                                     <template>
                                                         <view>
                                                            <view v-for="(item,index) in todos">
                                                                <view> {{ item.id}} </view>
                                                                <view> {{ item.text }} </view>
                                                                <view> {{ item.done }} </view>
                                                            </view>
                                                         </view>
                                                     </template>
                                                     <script>
                                                        export default{
                                                            computed:{
                                                                todos(){
                                                                    return this.$store.getters.doneTodos
                                                                }
                                                            }
                                                        }
                                                     <//script>
                                    
                                
                                3、通过方法访问

                                            你可以通过让 getter 返回一个函数，来实现给getter 传参。在你对 store 里的数组进行查询时非常有用。

                                            注意：  getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

                                            eg:
                                                 !-- 页面路径 : pages/index/index.vue ---

                                                 <template>
                                                    <view>
                                                        <view v-for="(item,index) in todos">
                                                            <view>{{ item }} </view>
                                                        </view>
                                                    </view>
                                                 </template>

                                                 <script>
                                                    export default{
                                                        coumputed:{
                                                            todos(){
                                                                return this.$store.getters[getToDoById](12)
                                                            }
                                                        }
                                                    }
                                                 <//script>

                                4、mapGetters 辅助函数访问

                                            mapGetters 辅助函数仅仅是将 store 中的getter 映射到局部计算属性：

                                            eg:
                                                    !-- 页面路径 ： pages/index/index.vue ----
                                                    <template>
                                                        <view>
                                                            <view>{{doneTOdosCount}}</view>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        import {mapGetters} from 'vuex'  // 引入mapGetters
                                                        export default{
                                                            computed:{
                                                                // 使用对象展开运算符将 getter 混入 computed 对象中
                                                                ...mapGetters({
                                                                    'doneTodos',
                                                                    'doneTodosCount'
                                                                })
                                                            }
                                                        }
                                                    <//script>

                                            如果你想将一个 getter 属性另取一个名字，使用对象形式：

                                                    !-- 页面路径 ：  pages/index/index.vue ---
                                                    <template>
                                                        <view>
                                                            <view> {{ doneCount}} </view>
                                                        </view>
                                                    </template>

                                                    <script>
                                                        import {mapGetters} from 'vuex' // 引入mapGetters
                                                        export default{
                                                            computed:{
                                                                ...mapGetters({
                                                                    // // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
                                                                    doneCount:'doneTodosCount'
                                                                })
                                                            }
                                                        }
                                                    <//script>
                    */
        </script>
    </body>
</html>